<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <view class="back-btn" @click="goBack">
            <text class="fas fa-arrow-left"></text>
          </view>
          <text class="header-title">设备详情</text>
        </div>
        <div class="header-right">
          <view class="refresh-btn" @click="refreshData">
            <text class="fas fa-sync-alt"></text>
          </view>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 设备基本信息卡片 -->
      <view class="device-info-card">
        <view class="device-header">
          <view class="device-icon-container">
            <view class="device-icon" :class="getDeviceStatusClass(deviceInfo.status)">
              <text class="fas fa-dumpster"></text>
            </view>
          </view>
          <view class="device-basic-info">
            <text class="device-name">{{ deviceInfo.name }}</text>
            <text class="device-location">{{ deviceInfo.location }}</text>
            <view class="status-badge" :class="deviceInfo.status">
              <text class="status-text">{{ getStatusText(deviceInfo.status) }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 设备状态信息 -->
      <view class="status-info-card">
        <view class="card-title">
          <text class="title-text">设备状态</text>
          <text class="update-time">更新时间：{{ deviceInfo.updateTime }}</text>
        </view>
        
        <view class="status-grid">
          <view class="status-item">
            <view class="status-icon weight">
              <text class="fas fa-weight-hanging"></text>
            </view>
            <view class="status-content">
              <text class="status-label">当前重量</text>
              <text class="status-value">{{ deviceInfo.weight }}KG</text>
            </view>
          </view>
          
          <view class="status-item">
            <view class="status-icon capacity">
              <text class="fas fa-chart-pie"></text>
            </view>
            <view class="status-content">
              <text class="status-label">容量占比</text>
              <text class="status-value">{{ deviceInfo.fillPercentage }}%</text>
            </view>
          </view>
          
          
        </view>
      </view>

      <!-- 清运信息 -->
      <view class="cleanup-info-card">
        <view class="card-title">
          <text class="title-text">清运信息</text>
        </view>
        
        <view class="cleanup-details">
          <view class="detail-row">
            <text class="detail-label">上次清运时间</text>
            <text class="detail-value">{{ deviceInfo.lastCleanupTime }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">上次清运重量</text>
            <text class="detail-value">{{ deviceInfo.lastCleanupWeight }}KG</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">累计清运次数</text>
            <text class="detail-value">{{ deviceInfo.totalCleanupCount }}次</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">累计清运重量</text>
            <text class="detail-value">{{ deviceInfo.totalCleanupWeight }}KG</text>
          </view>
        </view>
      </view>

      <!-- 设备位置信息 -->
      <view class="location-info-card">
        <view class="card-title">
          <text class="title-text">位置信息</text>
        </view>
        
        <view class="location-details">
          <view class="detail-row">
            <text class="detail-label">详细地址</text>
            <text class="detail-value">{{ deviceInfo.fullAddress }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">设备编号</text>
            <text class="detail-value">{{ deviceInfo.deviceId }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">安装日期</text>
            <text class="detail-value">{{ deviceInfo.installDate }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮区域 -->
      <view class="action-buttons">
        <view class="action-btn primary" @click="startCleanup">
          <text class="fas fa-truck"></text>
          <text class="btn-text">开始清运</text>
        </view>
        <view class="action-btn secondary" @click="reportIssue">
          <text class="fas fa-exclamation-triangle"></text>
          <text class="btn-text">故障报修</text>
        </view>
      </view>
    </main>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceId: '',
      deviceInfo: {
        id: 1,
        name: '智能回收箱-001',
        location: '科技园A座门口',
        fullAddress: '深圳市南山区科技园A座1号门东侧',
        deviceId: 'SB-001-2024',
        weight: 45.2,
        capacity: 50,
        fillPercentage: 90,
        status: 'full',
        temperature: 28,
        battery: 85,
        updateTime: '2024-09-24 14:30',
        lastCleanupTime: '2024-09-22 16:30',
        lastCleanupWeight: 48.5,
        totalCleanupCount: 156,
        totalCleanupWeight: 7580,
        installDate: '2024-01-15'
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.deviceId = options.id;
      this.loadDeviceInfo();
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 刷新数据
    refreshData() {
      uni.showLoading({
        title: '刷新中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });
        this.loadDeviceInfo();
      }, 1000);
    },
    
    // 加载设备信息
    loadDeviceInfo() {
      // 模拟根据设备ID加载不同的设备信息
      const deviceData = {
        1: {
          id: 1,
          name: '智能回收箱-001',
          location: '科技园A座门口',
          fullAddress: '深圳市南山区科技园A座1号门东侧',
          deviceId: 'SB-001-2024',
          weight: 45.2,
          capacity: 50,
          fillPercentage: 90,
          status: 'full',
          temperature: 28,
          battery: 85,
          updateTime: '2024-09-24 14:30',
          lastCleanupTime: '2024-09-22 16:30',
          lastCleanupWeight: 48.5,
          totalCleanupCount: 156,
          totalCleanupWeight: 7580,
          installDate: '2024-01-15'
        },
        2: {
          id: 2,
          name: '智能回收箱-002',
          location: '办公楼B栋1楼',
          fullAddress: '深圳市南山区科技园办公楼B栋1楼大厅',
          deviceId: 'SB-002-2024',
          weight: 38.5,
          capacity: 50,
          fillPercentage: 77,
          status: 'full',
          temperature: 26,
          battery: 92,
          updateTime: '2024-09-24 14:25',
          lastCleanupTime: '2024-09-23 10:15',
          lastCleanupWeight: 46.2,
          totalCleanupCount: 142,
          totalCleanupWeight: 6890,
          installDate: '2024-01-20'
        },
        3: {
          id: 3,
          name: '智能回收箱-003',
          location: '员工餐厅旁',
          fullAddress: '深圳市南山区科技园员工餐厅东侧',
          deviceId: 'SB-003-2024',
          weight: 42.8,
          capacity: 50,
          fillPercentage: 86,
          status: 'full',
          temperature: 30,
          battery: 78,
          updateTime: '2024-09-24 14:20',
          lastCleanupTime: '2024-09-21 15:45',
          lastCleanupWeight: 44.8,
          totalCleanupCount: 168,
          totalCleanupWeight: 8120,
          installDate: '2024-01-10'
        }
      };
      
      this.deviceInfo = deviceData[this.deviceId] || deviceData[1];
    },
    
    // 获取设备状态样式类
    getDeviceStatusClass(status) {
      return status === 'full' ? 'full' : status === 'high' ? 'high' : 'normal';
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'full': '已满',
        'high': '较满',
        'normal': '正常'
      };
      return statusMap[status] || '正常';
    },
    
    // 开始清运
    startCleanup() {
      uni.showModal({
        title: '确认清运',
        content: `确定要开始清运 ${this.deviceInfo.name} 吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '正在处理...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '清运任务已创建',
                icon: 'success'
              });
            }, 1500);
          }
        }
      });
    },
    
    // 故障报修
    reportIssue() {
      uni.showToast({
        title: '故障报修功能开发中',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #f6ffed, #f6ffed);
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-btn .fas {
  font-size: 24rpx;
  color: #1D2129;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.header-right {
  display: flex;
  align-items: center;
}

.refresh-btn {
  width: 40rpx;
  height: 40rpx;
  background-color: #E8F3FF;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-btn .fas {
  font-size: 24rpx;
  color: #165DFF;
}

/* 主内容区 */
.main-content {
  padding: 120rpx 30rpx 30rpx;
}

/* 设备信息卡片 */
.device-info-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.device-header {
  display: flex;
  align-items: center;
}

.device-icon-container {
  margin-right: 20rpx;
}

.device-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-icon.full {
  background-color: rgba(245, 63, 63, 0.1);
}

.device-icon.high {
  background-color: rgba(255, 125, 0, 0.1);
}

.device-icon.normal {
  background-color: rgba(0, 180, 42, 0.1);
}

.device-icon .fas {
  font-size: 40rpx;
}

.device-icon.full .fas {
  color: #F53F3F;
}

.device-icon.high .fas {
  color: #FF7D00;
}

.device-icon.normal .fas {
  color: #00B42A;
}

.device-basic-info {
  flex: 1;
}

.device-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 8rpx;
  display: block;
}

.device-location {
  font-size: 24rpx;
  color: #86909C;
  margin-bottom: 12rpx;
  display: block;
}

.status-badge {
  display: inline-block;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
}

.status-badge.full {
  background-color: rgba(245, 63, 63, 0.1);
  color: #F53F3F;
}

.status-badge.high {
  background-color: rgba(255, 125, 0, 0.1);
  color: #FF7D00;
}

.status-badge.normal {
  background-color: rgba(0, 180, 42, 0.1);
  color: #00B42A;
}

/* 状态信息卡片 */
.status-info-card, .cleanup-info-card, .location-info-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #F2F3F5;
}

.title-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #1D2129;
}

.update-time {
  font-size: 20rpx;
  color: #86909C;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.status-item {
  display: flex;
  align-items: center;
}

.status-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.status-icon.weight {
  background-color: rgba(22, 93, 255, 0.1);
}

.status-icon.capacity {
  background-color: rgba(255, 125, 0, 0.1);
}

.status-icon.temperature {
  background-color: rgba(245, 63, 63, 0.1);
}

.status-icon.battery {
  background-color: rgba(0, 180, 42, 0.1);
}

.status-icon .fas {
  font-size: 24rpx;
}

.status-icon.weight .fas {
  color: #165DFF;
}

.status-icon.capacity .fas {
  color: #FF7D00;
}

.status-icon.temperature .fas {
  color: #F53F3F;
}

.status-icon.battery .fas {
  color: #00B42A;
}

.status-content {
  flex: 1;
}

.status-label {
  font-size: 20rpx;
  color: #86909C;
  margin-bottom: 4rpx;
  display: block;
}

.status-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #1D2129;
  display: block;
}

/* 详情信息 */
.cleanup-details, .location-details {
  display: flex;
  flex-direction: column;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F2F3F5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 24rpx;
  color: #86909C;
}

.detail-value {
  font-size: 24rpx;
  color: #1D2129;
  font-weight: 500;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background-color: #165DFF;
  color: #fff;
}

.action-btn.secondary {
  background-color: #F2F3F5;
  color: #1D2129;
}

.action-btn:active {
  transform: scale(0.98);
}

.action-btn .fas {
  font-size: 24rpx;
  margin-right: 12rpx;
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
}
</style>